<template>
  <div id="tqthree">
    <div class="top">
      <h1>
        <span>特权3</span>下单返奖金，再兑专属红包
      </h1>
      <p>每下一笔实付满￥20订单，获1个奖励金</p>
    </div>
    <div class="bottom">
        <div class="bot">
            <p><span>2个</span>奖励金兑换</p>
            <div class="hongbao">          
                <h5><span>￥4</span>商家红包</h5>
            </div>
        </div>
        <div class="bot">
            <p><span>5个</span>奖励金兑换</p>
            <div class="hongbao">          
                <h5><span>￥5</span>会员红包</h5>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
#tqthree {
  margin: 10px;
  height: 178px;
  .top {
    border-radius: 2.13333vw;
    box-shadow: 0 0.53333vw 1.06667vw 0 rgba(0, 0, 0, 0.03);
    background-color: #fff;
    background-position: 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 70px;
    overflow: hidden;
    h1 {
      font-size: 4.26667vw;
      font-weight: 700;
      color: #333;
      margin: 20px 0 5px 5px;
      display: flex;
      align-items: center;
      margin-left: 10px;
      span {
        font-size: 3.2vw;
        height: 5.33333vw;
        line-height: 5.33333vw;
        text-align: center;
        color: rgba(64, 33, 10, 0.8);
        background-color: #f2d499;
        padding: 0.26667vw 1.06667vw;
        border-radius: 1.06667vw;
        vertical-align: text-bottom;
        margin-right: 1.6vw;
      }
    }
    p {
      color: rgba(0, 0, 0, 0.4);
      font-size: 2.93333vw;
      margin-left: 10px;
    }
  }
  .bottom {
      width: 319px;
      height: 98px;
    //   background-color: red;
      display: flex;
      justify-content: space-between;
      margin-left: 10px;
      .bot {
          width: 155px;
          height: 98px;
          border: 1px solid rgba(180,119,56,.25);
          border-radius: 10%;
          text-align: center;
          p {
              color: #b47738;
              font-size: 3.467vw;
              span{
                  color: #ff4b33;
              }
          }
          .hongbao {
              width: 137px;
              height: 56px;
              line-height: 56px;
              background-color: rgba(255,230,181,.5);
              margin-left: 10px;
              margin-top: 10px;
              h5 {
                  color: #b47738;
                  font-size: 14px;
                  span {
                      font-size: 18px;
                    color: #ff4b33;
                    margin-right: 10px;
                  }
              }
          }
      }
  }
}
</style>